<!-- 能耗对比 -->
<template>
    <div class="chart-container">
        <div class="table-search">
            <el-form class="form" :inline="true" style="display: flex; justify-content: space-between;">
                <div>
                    <el-form-item label="时间:">
                        <el-select
                            v-model="timeCode"
                            size="small"
                            style="width: 120px; margin-right: 6px"
                            placeholder="请选择时间"
                        >
                            <el-option
                                v-for="item in dateTypeOptions"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <date-pick :type="timeCode" v-model="dateTime" />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item style="margin-left: 20px">
                        <el-button 
                            size="small" 
                            @click="search" 
                            type="primary" 
                            :loading="loading"
                            icon="el-icon-search"
                        >搜索</el-button>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button 
                            size="small" 
                            @click="reset"
                            type="warning"
                            icon="el-icon-refresh-left"
                        >重置</el-button>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-left: 6px"
                            @click="handleExport"
                            >导出</el-button
                        >
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="center">
            <div class="echarts">
                <!-- <h4>能耗对比</h4> -->
                <chartECC
                    height="100%"
                    width="100%"
                    id="one"
                    v-if="lineData1.length > 0"
                    :xData="xData1"
                    :lineData="lineData1"
                    :legendData="legendData1"
                    :yAxisNameLeft="yAxisNameLeft"
                />
                <div v-else class="no-data" style="height: 100%; width: 100%"> 暂无数据 </div>
            </div>
        </div>

        <div>
            <RlTable
                ref="deviceTable"
                :border="false"
                :search="false"
                :showCard="false"
                :is-pagination="false"
                :initData="false"
                :data="list"
            >
                <template #default>
                    <el-table-column
                        v-for="(item, index) in tableHeader"
                        :key="index"
                        :label="item"
                        :prop="item"
                    ></el-table-column>
                </template>
                <template #search>
                    <SearchContion />
                </template>
            </RlTable>
        </div>
    </div>
</template>

<script>
    import chartECC from '../echarts/chartECC.vue'
    import { findEnergySelect, findEnumOptions } from '@/api/common.js'
    import { consumptionCompare } from '@/api/contrast.js'
    import { transformTableData } from '@/utils'
    import { download } from '@/utils/request'
    import DatePick from '@/components/DatePick/datePickerrange'

    export default {
        name: 'MixChart',
        components: { chartECC, DatePick },
        props: {
            selectedNodesECC: {
                type: Array,
                default: () => [],
            },
            compareType: {
                type: Number,
            },
            energyType: {
                type: String,
            },
            unit: {
                type: String,
            },
        },

        data() {
            return {
                tableHeader: [],
                list: [],
                loading: false,
                energyTypeData: [],
                timeCode: 'day',
                dateTime: '',
                resultTime: '',
                xData1: [],
                lineData1: [],
                legendData1: [],
                dateTypeOptions: [],
                params: {
                    projectId: this.$store.state.projectId,
                },
            }
        },
        async created() {
            const result = await findEnumOptions('statisticTimeType')
            this.dateTypeOptions = result.data
            this.timeCode = 'day'

            this.getEnergyTypeData()
        },
        computed: {
            yAxisNameLeft() {
                return '单位（' + this.unit + ')'
            },
        },
        methods: {
            /** 导出按钮操作 */
            handleExport() {
                this.getParams()
                const name = this.selectedNodesECC.map((item) => item.name).join('/')
                download(
                    '/compare/analysis//consumption-compare-export',
                    this.params,
                    `${name}-能耗对比.xlsx`
                )
            },
            checkValid() {
                if (this.selectedNodesECC.length === 0) {
                    this.$message.warning('请选择至少一个分项')
                    return false
                }
                if (!this.timeCode) {
                    this.$message.warning('请选择时间')
                    return false
                }
                if (!this.dateTime) {
                    this.$message.warning('请选择时间')
                    return false
                }
                // const len = this.selectedNodesECC.length
                // for (let index = 0; index < len; index++) {
                //     if (
                //         this.selectedNodesECC[index].parentId !=
                //         this.selectedNodesECC[(index + 1) % len].parentId
                //     ) {
                //         this.$message.warning('所选分项的父节点必须是同一个')
                //         return false
                //     }
                // }
                return true
            },

            //查询能源类型
            async getEnergyTypeData() {
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyTypeData = energyOptions
            },
            getParams() {
                this.params.subitemIds = this.selectedNodesECC.map((item) => item.id)
                this.params.energyTypeCode = this.energyType
                this.params.timeCode = this.timeCode
                this.params.timeValue = ''
                this.params.startDate = this.dateTime[0]
                this.params.endDate = this.dateTime[1]
            },
            getproductData() {
                // 清空缓存，避免取消节点时绘图依旧保留
                this.xData1 = []
                this.lineData1 = []
                this.legendData1 = []
                this.getParams()
                consumptionCompare(this.params)
                    .then((res) => {
                        this.loading = false
                        const { code, data } = res
                        if (code === 200) {
                            const { head, data: tableData } = transformTableData(
                                data.dataDetailList || []
                            )
                            this.tableHeader = head
                            this.list = tableData
                            this.$refs['deviceTable'].tableData = this.list
                        }

                        // //产品能耗图
                        this.lineData1 = []
                        this.xData1 = []
                        this.legendData1 = this.selectedNodesECC.map((item) => item.name)
                        let objArr = new Array()
                        for (let index = 0; index < this.legendData1.length; index++) {
                            objArr.push({
                                name: this.legendData1[index],
                                type: 'line',
                                data: [],
                            })
                        }

                        // this.legendData1 = ["1#计量器具名称", "2#计量器具名称", "3#计量器具名称"]
                        res.data.dataList.forEach((item, index) => {
                            this.xData1.push(item[0])
                            for (let i = 1; i < item.length; i++) {
                                objArr[i - 1]?.data.push(item[i])
                            }
                        })
                        this.lineData1 = objArr
                        this.list = res.list
                    })
                    .finally(() => {
                        this.loading = false
                    })
            },
            // 搜素：
            search() {
                this.loading = true
                let ret = this.checkValid()
                if (ret) {
                    this.getproductData()
                }
            },
            // 重置：
            reset() {
                this.timeCode = ''
                this.dateTime = ''
                this.loading = false
            },
            // exportDate() {
            //     const data = {
            //         compareType: this.compareType,
            //         energyType: this.energyType,
            //         timeCode: this.timeCode,
            //         startTime: this.startTime,
            //         endTime: this.endTime,
            //         subitemIds: this.selectedNodesECC.map((item) => item.id),
            //     }
            //     energyConsumptionExport(data).then((res) => {
            //         var filename = '能耗情况环比分析'
            //         var result = res
            //         const link = document.createElement('a')
            //         let blob = new Blob([result], { type: 'application/vnd.ms-excel' })
            //         link.style.display = 'none'
            //         link.href = URL.createObjectURL(blob)
            //         link.setAttribute('download', filename + '.xls')
            //         document.body.appendChild(link)
            //         link.click()
            //         document.body.removeChild(link)
            //     })
            // },
        },
    }
</script>

<style lang="scss" scoped>
    .chart-container {
        position: relative;
        width: 100%;
        height: calc((100vh - 48px) - 130px) !important;
        overflow-y: auto;
    }
    .top {
        margin-top: 15px;
        // display: flex;
        // align-items: center;
        // .title {
        //   height: 100%;
        // }
    }
    .echarts {
        background: linear-gradient(180deg, #032658 0%, #032156 100%);
    }

    .export {
        width: 100px;
        float: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .center {
        // height: 88%;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        // justify-content: space-around;
        div {
            width: 100%;
            height: 300px;
            // overflow: hidden;
            //background: #ffffff;
            //box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
            //border-radius: 10px;
            //padding: 10px;
            h4 {
                text-align: left;
                color: rgba(216, 240, 255, 0.6);
            }
        }
    }

    .no-data {
        color: #909399;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .pagination {
        margin-top: 5px;
        // right: 0;
        // bottom: 0;
        // color: rgb(230, 162, 60);
    }

    .table-search ::v-deep .el-form-item {
        margin-bottom: 0!important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .table-search {
        padding: 20px 15px;
    }
    ::v-deep .el-form-item__label {
        line-height: 36px !important;
        height: 36px!important;
    }
    ::v-deep .el-form-item__content {
        line-height: 36px !important;
        height: 36px !important;
    }
</style>
